<!-- BEGIN: Subheader -->
<div class="m-subheader" appunwraptag="">
	<div class="d-flex align-items-center">
		<div class="mr-auto">
			<h3 class="m-subheader__title">
				个人资料
			</h3>
		</div>
		<div>
			<div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover" aria-expanded="true">
				<a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary  m-btn m-btn--outline-2x m-btn--air m-btn--icon m-btn--icon-only m-btn--pill  m-dropdown__toggle">
					<i class="la la-plus m--hide"></i>
					<i class="la la-ellipsis-h"></i>
				</a>
				<div class="m-dropdown__wrapper">
					<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
					<div class="m-dropdown__inner">
						<div class="m-dropdown__body">
							<div class="m-dropdown__content">
								<ul class="m-nav">
									<li class="m-nav__section m-nav__section--first ">
										<span class="m-nav__section-text">
											快捷菜单
										</span>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-share"></i>
											<span class="m-nav__link-text">
												Activity
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-chat-1"></i>
											<span class="m-nav__link-text">
												Messages
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-info"></i>
											<span class="m-nav__link-text">
												FAQ
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-lifebuoy"></i>
											<span class="m-nav__link-text">
												Support
											</span>
										</a>
									</li>
									<li class="m-nav__separator m-nav__separator--fit"></li>
									<li class="m-nav__item">
										<a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">
											Submit
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Subheader -->
<div class="m-content">
	<div class="row">
		<div class="col-xl-3 col-lg-4">
			<div class="m-portlet m-portlet--full-height">
				<div class="m-portlet__body">
					<div class="m-card-profile">
						<div class="m-card-profile__title m--hide">
							个人资料
						</div>
						<div class="m-card-profile__pic">
							<div class="m-card-profile__pic-wrapper">
								<img src="{{avatar.url}}" alt=""/>
							</div>
						</div>
						<div class="m-card-profile__details">
							<span class="m-card-profile__name">
								{{userinfo.nickname}}
							</span>
							<a href="" class="m-card-profile__email m-link">
								{{userinfo.email}}
							</a>
						</div>
					</div>
					<ul class="m-nav m-nav--hover-bg m-portlet-fit--sides">
						<li class="m-nav__separator m-nav__separator--fit"></li>
						<li class="m-nav__section m--hide">
							<span class="m-nav__section-text">
								Section
							</span>
						</li>
						<li class="m-nav__item">
							<a routerLink="/user/profile" class="m-nav__link">
								<i class="m-nav__link-icon flaticon-profile-1"></i>
								<span class="m-nav__link-title">
									<span class="m-nav__link-wrap">
										<span class="m-nav__link-text">
											个人简介
										</span>
										<span class="m-nav__link-badge">
											<span class="m-badge m-badge--success">
												2
											</span>
										</span>
									</span>
								</span>
							</a>
						</li>
						<li class="m-nav__item">
							<a routerLink="/" class="m-nav__link">
								<i class="m-nav__link-icon flaticon-share"></i>
								<span class="m-nav__link-text">
									仪表盘
								</span>
							</a>
						</li>
						<li class="m-nav__item">
							<a routerLink="/message" class="m-nav__link">
								<i class="m-nav__link-icon flaticon-chat-1"></i>
								<span class="m-nav__link-text">
									信息
								</span>
							</a>
						</li>
						<li class="m-nav__item">
							<a routerLink="/project" class="m-nav__link">
								<i class="m-nav__link-icon flaticon-graphic-2"></i>
								<span class="m-nav__link-text">
									项目
								</span>
							</a>
						</li>
						<li class="m-nav__item">
							<a routerLink="/task" class="m-nav__link">
								<i class="m-nav__link-icon flaticon-time-3"></i>
								<span class="m-nav__link-text">
									任务
								</span>
							</a>
						</li>
						<li class="m-nav__item">
							<a routerLink="/support" class="m-nav__link">
								<i class="m-nav__link-icon flaticon-lifebuoy"></i>
								<span class="m-nav__link-text">
									技术支持
								</span>
							</a>
						</li>
					</ul>
					<div class="m-portlet__body-separator"></div>
					<div class="m-widget1 m-widget1--paddingless">
						<div class="m-widget1__item">
							<div class="row m-row--no-padding align-items-center">
								<div class="col">
									<h3 class="m-widget1__title">
										Member Profit
									</h3>
									<span class="m-widget1__desc">
										Awerage Weekly Profit
									</span>
								</div>
								<div class="col m--align-right">
									<span class="m-widget1__number m--font-brand">
										+$17,800
									</span>
								</div>
							</div>
						</div>
						<div class="m-widget1__item">
							<div class="row m-row--no-padding align-items-center">
								<div class="col">
									<h3 class="m-widget1__title">
										项目标题一
									</h3>
									<span class="m-widget1__desc">
										简单描述
									</span>
								</div>
								<div class="col m--align-right">
									<span class="m-widget1__number m--font-danger">
										+1,800
									</span>
								</div>
							</div>
						</div>
						<div class="m-widget1__item">
							<div class="row m-row--no-padding align-items-center">
								<div class="col">
									<h3 class="m-widget1__title">
										项目标题二
									</h3>
									<span class="m-widget1__desc">
										简单描述
									</span>
								</div>
								<div class="col m--align-right">
									<span class="m-widget1__number m--font-success">
										-27,49%
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-9 col-lg-8">
			<div class="m-portlet m-portlet--full-height m-portlet--tabs">
				<div class="m-portlet__head">
					<div class="m-portlet__head-tools">
						<ul class="nav nav-tabs m-tabs m-tabs-line   m-tabs-line--left m-tabs-line--primary" role="tablist">
							<li class="nav-item m-tabs__item">
								<a class="nav-link m-tabs__link active" data-toggle="tab" href="#m_user_profile_tab_1" role="tab">
									<i class="flaticon-share m--hide"></i>
									更新资料
								</a>
							</li>
							<li class="nav-item m-tabs__item">
								<a class="nav-link m-tabs__link" data-toggle="tab" href="#m_user_profile_tab_2" role="tab">
									头像设置
								</a>
							</li>
							<li class="nav-item m-tabs__item">
								<a class="nav-link m-tabs__link" data-toggle="tab" href="#m_user_profile_tab_3" role="tab">
									帐号安全
								</a>
							</li>
						</ul>
					</div>
					<div class="m-portlet__head-tools">
						<ul class="m-portlet__nav">
							<li class="m-portlet__nav-item m-portlet__nav-item--last">
								<div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover" aria-expanded="true">
									<a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary  m-btn m-btn--icon m-btn--icon-only m-btn--pill  m-dropdown__toggle">
										<i class="la la-gear"></i>
									</a>
									<div class="m-dropdown__wrapper">
										<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
										<div class="m-dropdown__inner">
											<div class="m-dropdown__body">
												<div class="m-dropdown__content">
													<ul class="m-nav">
														<li class="m-nav__section m-nav__section--first">
															<span class="m-nav__section-text">
																Quick Actions
															</span>
														</li>
														<li class="m-nav__item">
															<a href="" class="m-nav__link">
																<i class="m-nav__link-icon flaticon-share"></i>
																<span class="m-nav__link-text">
																	Create Post
																</span>
															</a>
														</li>
														<li class="m-nav__item">
															<a href="" class="m-nav__link">
																<i class="m-nav__link-icon flaticon-chat-1"></i>
																<span class="m-nav__link-text">
																	Send Messages
																</span>
															</a>
														</li>
														<li class="m-nav__item">
															<a href="" class="m-nav__link">
																<i class="m-nav__link-icon flaticon-multimedia-2"></i>
																<span class="m-nav__link-text">
																	Upload File
																</span>
															</a>
														</li>
														<li class="m-nav__section">
															<span class="m-nav__section-text">
																Useful Links
															</span>
														</li>
														<li class="m-nav__item">
															<a href="" class="m-nav__link">
																<i class="m-nav__link-icon flaticon-info"></i>
																<span class="m-nav__link-text">
																	FAQ
																</span>
															</a>
														</li>
														<li class="m-nav__item">
															<a href="" class="m-nav__link">
																<i class="m-nav__link-icon flaticon-lifebuoy"></i>
																<span class="m-nav__link-text">
																	Support
																</span>
															</a>
														</li>
														<li class="m-nav__separator m-nav__separator--fit m--hide"></li>
														<li class="m-nav__item m--hide">
															<a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">
																Submit
															</a>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="tab-content">
					<div class="tab-pane active" id="m_user_profile_tab_1">
						<form (ngSubmit)="basicUpdate()" class="m-form m-form--fit m-form--label-align-right">
							<div class="m-portlet__body">
								<div class="form-group m-form__group m--margin-top-10 m--hide">
									<div class="alert m-alert m-alert--default" role="alert">
										帐号相关设置页面！
									</div>
								</div>
								<div class="form-group m-form__group row">
									<div class="col-10 ml-auto">
										<h3 class="m-form__section">
											1. 个人信息
										</h3>
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										昵称
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.nickname" name="nickname" #nickname="ngModel"  class="form-control m-input" type="text" placeholder="请输入昵称">
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										性别
									</label>
									<div class="col-7">
										<div class="m-radio-inline">
											<label class="m-radio">
												<input name="gender" type="radio" [checked]="userinfo.gender == 0" (click)="userinfo.gender = 0" value="0">
												保密
												<span></span>
											</label>
											<label class="m-radio">
												<input name="gender" type="radio" [checked]="userinfo.gender == 1" (click)="userinfo.gender = 1" value="1">
												男
												<span></span>
											</label>
											<label class="m-radio">
												<input name="gender" type="radio" [checked]="userinfo.gender == 2"  (click)="userinfo.gender = 2" value="2">
												女
												<span></span>
											</label>
										</div>
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										职位
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.occupation" name="occupation" #occupation="ngModel" class="form-control m-input" type="text" placeholder="请输入职位">
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										公司名称
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.company" name="company" #company="ngModel" class="form-control m-input" type="text" placeholder="请输入公司/团队">
										<span class="m-form__help">
											团队名称/公司名称
										</span>
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										手机号
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.mobile" name="mobile" #name="ngModel" class="form-control m-input" type="text" placeholder="请输入手机号">
									</div>
								</div>
								<div class="m-form__seperator m-form__seperator--dashed m-form__seperator--space-2x"></div>
								<div class="form-group m-form__group row">
									<div class="col-10 ml-auto">
										<h3 class="m-form__section">
											2. 地址
										</h3>
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										省
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.province" name="province" #province="ngModel" class="form-control m-input" type="text" placeholder="请输入省份">
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										市
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.city" name="city" #city="ngModel" class="form-control m-input" type="text" placeholder="请输入城市">
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										区/县
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.district" name="district" #district="ngModel" class="form-control m-input" type="text" placeholder="请输入区县">
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										详细地址
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.address" name="address" #address="ngModel" class="form-control m-input" type="text" placeholder="请输入详细地址">
									</div>
								</div>
								<div class="m-form__seperator m-form__seperator--dashed m-form__seperator--space-2x"></div>
								<div class="form-group m-form__group row">
									<div class="col-10 ml-auto">
										<h3 class="m-form__section">
											3. 社交信息
										</h3>
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										QQ
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.qq" name="qq" #qq="ngModel" class="form-control m-input" type="text" placeholder="请输入qq号">
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										微信
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.wechat" name="wechat" #wechat="ngModel" class="form-control m-input" type="text" placeholder="请输入微信号">
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										Github
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.github" name="github" #github="ngModel" class="form-control m-input" type="text" placeholder="请输入开源仓库地址">
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										微博
									</label>
									<div class="col-7">
										<input [(ngModel)]="userinfo.weibo" name="weibo" #weibo="ngModel" class="form-control m-input" type="text" placeholder="请输入微博地址">
									</div>
								</div>
							</div>
							<div class="m-portlet__foot m-portlet__foot--fit">
								<div class="m-form__actions">
									<div class="row">
										<div class="col-2"></div>
										<div class="col-7">
											<button type="submit" class="btn btn-accent m-btn m-btn--air m-btn--custom">
												保存修改
											</button>
											&nbsp;&nbsp;
											<button type="reset" class="btn btn-secondary m-btn m-btn--air m-btn--custom">
												取消
											</button>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="tab-pane" id="m_user_profile_tab_2">
						<form (ngSubmit)="avatarUpdate()" class="m-form m-form--fit m-form--label-align-right">
							<div class="m-portlet__body">
								<div class="form-group m-form__group m--margin-top-10 m--hide">
									<div class="alert m-alert m-alert--default" role="alert">
										帐号相关设置页面！
									</div>
								</div>
								<div class="form-group m-form__group row">
									<div class="col-10 ml-auto">
										<h3 class="m-form__section">
											1. 头像设置
										</h3>
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										选择头像
									</label>
									<div class="col-7">
										<nz-upload
												[nzAction]="avatarUploadUrl"
												nzListType="picture-card"
												nzAccept="image/*"
												[nzData]="avatarFormData"
												[nzHeaders]="avatarUploadHeaders"
												[(nzFileList)]="fileList"
												[nzShowButton]="fileList.length < 1"
												[nzBeforeUpload]="beforeUpload"
												(nzChange)="avatarChange($event)"
												[nzPreview]="handlePreview">
											<i class="anticon anticon-plus"></i>
											<div class="ant-upload-text">上传</div>
										</nz-upload>
										<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
											<ng-template #modalContent>
												<img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
											</ng-template>
										</nz-modal>
									</div>
								</div>

							</div>
							<div class="m-portlet__foot m-portlet__foot--fit">
								<div class="m-form__actions">
									<div class="row">
										<div class="col-2"></div>
										<div class="col-7">
											<button type="submit" class="btn btn-accent m-btn m-btn--air m-btn--custom">
												保存新头像
											</button>
											&nbsp;&nbsp;
											<button type="reset" class="btn btn-secondary m-btn m-btn--air m-btn--custom">
												取消
											</button>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="tab-pane" id="m_user_profile_tab_3">
						<form (ngSubmit)="passwordUpdate()" class="m-form m-form--fit m-form--label-align-right">
							<div class="m-portlet__body">
								<div class="form-group m-form__group m--margin-top-10 m--hide">
									<div class="alert m-alert m-alert--default" role="alert">
										密码相关设置页面！
									</div>
								</div>
								<div class="form-group m-form__group row">
									<div class="col-10 ml-auto">
										<h3 class="m-form__section">
											1. 更新密码
										</h3>
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										旧密码
									</label>
									<div class="col-7">
										<input [(ngModel)]="password.old_password" name="old_password" #old_password="ngModel"  class="form-control m-input" type="text" placeholder="请输入旧密码">
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										新密码
									</label>
									<div class="col-7">
										<input [(ngModel)]="password.new_password" name="new_password" #new_password="ngModel" class="form-control m-input" type="text" placeholder="请输入新密码">
									</div>
								</div>
								<div class="form-group m-form__group row">
									<label for="example-text-input" class="col-2 col-form-label">
										确认密码
									</label>
									<div class="col-7">
										<input [(ngModel)]="password.new_password2" name="new_password2" #new_password2="ngModel" class="form-control m-input" type="text" placeholder="请再次输入新密码">
										<span class="m-form__help">
											再次输入新密码以确认输入准确
										</span>
									</div>
								</div>

								<div class="m-form__seperator m-form__seperator--dashed m-form__seperator--space-2x"></div>

							</div>
							<div class="m-portlet__foot m-portlet__foot--fit">
								<div class="m-form__actions">
									<div class="row">
										<div class="col-2"></div>
										<div class="col-7">
											<button type="submit" class="btn btn-accent m-btn m-btn--air m-btn--custom">
												更新密码
											</button>
											&nbsp;&nbsp;
											<button type="reset" class="btn btn-secondary m-btn m-btn--air m-btn--custom">
												取消
											</button>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
